<template>
  <Layout class="layout">
    <Header class="header">
      <div class="layout-logo"></div>
      <header-bar></header-bar>
    </Header>
    <Layout class="main-body">
      <Sider class="menus">
        <Menu theme="dark" width="auto" :active-name="activeMenu" :open-names="openSubmenus">
          <Submenu v-for="menu of menus" :name="menu.title" :key="menu.id">
            <template slot="title">{{ menu.title }}</template>
            <nuxt-link v-for="item of menu.children" :key="item.id" :to="item.path">
              <menu-item :name="item.title">{{ item.title }}</menu-item>
            </nuxt-link>
          </Submenu>
        </Menu>
      </Sider>
      <Layout class="contents">
        <Breadcrumb class="bread-crumb">
          <BreadcrumbItem>Home</BreadcrumbItem>
          <BreadcrumbItem>Components</BreadcrumbItem>
          <BreadcrumbItem>Layout</BreadcrumbItem>
        </Breadcrumb>
        <Content class="content">
          <Button @click="changeModule('home')">Home Module</Button>
          <Button @click="changeModule('simple')">Simple Module</Button>
          <Button @click="changeModule('complicated')">Complicated Module</Button>
          <b v-highlight>{{Date.now() | format}}dsdsd</b>
          <nuxt />
        </Content>
      </Layout>
    </Layout>
  </Layout>
</template>

<script>
  import Menus from '../plugins/menus'
  import HeaderBar from '../components/HeaderBar'
  import { createNamespacedHelpers } from 'vuex'
  const { mapGetters, mapActions } = createNamespacedHelpers('menus')
  export default {
    name: 'Default',
    components: { HeaderBar },
    computed: mapGetters(['menus', 'activeMenu', 'openSubmenus', 'moduleName']),
    methods: {
      toCard() {
        this.$router.push('/overall/card')
      },
      changeModule (moduleName) {
        if (this.moduleName !== moduleName) {
          const { path } = Menus[moduleName]
          // console.log('path', path);
          this.changeModuleName(moduleName).then(() => {
            this.$router.push(path)
          })
        }
      },
      ...mapActions(['changeModuleName'])
    },
  /*  mounted () {
      this.$nextTick(() => {
        this.$nuxt.$loading.start()

        setTimeout(() => this.$nuxt.$loading.finish(), 5000)
      })
    }*/
  }
</script>

<style scoped lang="less">
  .layout {
    border: 1px solid #d7dde4;
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .layout-logo{
        width: 100px;
        height: 30px;
        background: #fff;
        border-radius: 3px;
      }
    }
    .main-body {
      height: calc(100vh - 64px);
      .menus {
        height: 100%;
      }
      .contents {
        height: 100%;
        padding: 16px;
        .bread-crumb {
          margin-bottom: 16px;
        }
        .content {
          background-color: #fff;
        }
      }
    }
  }
</style>
